<template>
  <div id="anima"></div>
</template>
<script>
import * as THREE from "three";
let scene;
let cube;
export default {
  data() {
    return {
      camera: null,
      // scene: null,
      renderer: null,
      // cube: null,
    };
  },
  methods: {
    init() {
      let anima = document.getElementById("anima")
      // PerspectiveCamera（透视摄像机）
      this.camera = new THREE.PerspectiveCamera(
        75,
        anima.clientWidth / anima.clientHeight,
        0.1,
        1000
      );
      this.camera.position.z = 5;
      scene = new THREE.Scene();

      // BoxGeometry立方体
      let geometry = new THREE.BoxGeometry(1, 1, 1);
      // MeshBasicMaterial 材质  给它一个材质，来让它有颜色
      let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，
      // 我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动
      cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
      // WebGLRenderer渲染器
      this.renderer = new THREE.WebGLRenderer();
      // 窗口设置大小
      this.renderer.setSize(anima.clientWidth, anima.clientHeight);
      anima.appendChild( this.renderer.domElement );
    },
    animate() {
      requestAnimationFrame(this.animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      this.renderer.render(scene, this.camera);
    },
  },
  mounted() {
    this.init()
    this.animate();
  },
};
</script>

<style>
#anima{
  width: 500px;
  height: 500px;
}
</style>